html:not(:theme(dark)) {
  font-weight: 400,
}

html {
  font: system;
  font-size: 11pt;
  var(accent): #04f;
  var(accent-text): #fff;
  var(lighten5): morph(window-accent-color, lighten: 60%);
  var(lighten4): morph(window-accent-color, lighten: 53%);
  var(lighten3): morph(window-accent-color, lighten: 41%);
  var(lighten2): morph(window-accent-color, lighten: 30%);
  var(lighten1): morph(window-accent-color, lighten: 12%);
  var(darken1): morph(window-accent-color, darken: 3%);
  var(darken2): morph(window-accent-color, darken: 6%);
  var(darken3): morph(window-accent-color, darken: 9%);
  var(darken4): morph(window-accent-color, darken: 12%);
  var(accent1): morph(window-accent-color, rotate: -20deg);
  var(accent2): morph(window-accent-color, rotate: -10deg);
  var(accent3): morph(window-accent-color, rotate: 10deg);
  var(accent4): morph(window-accent-color, rotate: 20deg);

  var(panel): #fff;
  var(panel-text): #000;

  var(danger-color): #db3737; // red
  var(success-color): #0f9960; // green
  var(warning-color): #d9822b; //gold?

  var(button-face): color(lighten4);
  var(button-text): #000;

  var(widget-back): #fff;
  var(widget-text): #000;

  var(disabled-text): #999;

  /* 颜色定义 */
  var(--white-default):#fff;
  var(--border-color):#e5e9f2;
  var(--primary-color): #007dff;
  var(--primary-color-shadow): #007dff30;
  var(--danger-color): #ff4949;
  var(--shadow-color): #1f2d3d20;
  var(--default-text-color):#333639;
  var(--mutted-text-color):#8492A6;

  /* "fontFamily": "v-sans, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
  "fontFamilyMono": "v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace",
  "fontWeight": "400",
  "fontWeightStrong": "500",
  "cubicBezierEaseInOut": "cubic-bezier(.4, 0, .2, 1)",
  "cubicBezierEaseOut": "cubic-bezier(0, 0, .2, 1)",
  "cubicBezierEaseIn": "cubic-bezier(.4, 0, 1, 1)",
  "borderRadius": "3px",
  "borderRadiusSmall": "2px",
  "fontSize": "14px",
  "fontSizeMini": "12px",
  "fontSizeTiny": "12px",
  "fontSizeSmall": "14px",
  "fontSizeMedium": "14px",
  "fontSizeLarge": "15px",
  "fontSizeHuge": "16px",
  "lineHeight": "1.6",
  "heightMini": "16px",
  "heightTiny": "22px",
  "heightSmall": "28px",
  "heightMedium": "34px",
  "heightLarge": "40px",
  "heightHuge": "46px",
  "baseColor": "#FFF",
  "primaryColor": "#18a058",
  "primaryColorHover": "#36ad6a",
  "primaryColorPressed": "#0c7a43",
  "primaryColorSuppl": "#36ad6a",
  "infoColor": "#2080f0",
  "infoColorHover": "#4098fc",
  "infoColorPressed": "#1060c9",
  "infoColorSuppl": "#4098fc",
  "successColor": "#18a058",
  "successColorHover": "#36ad6a",
  "successColorPressed": "#0c7a43",
  "successColorSuppl": "#36ad6a",
  "warningColor": "#f0a020",
  "warningColorHover": "#fcb040",
  "warningColorPressed": "#c97c10",
  "warningColorSuppl": "#fcb040",
  "errorColor": "#d03050",
  "errorColorHover": "#de576d",
  "errorColorPressed": "#ab1f3f",
  "errorColorSuppl": "#de576d",
  "textColorBase": "#000",
  "textColor1": "rgb(31, 34, 37)",
  "textColor2": "rgb(51, 54, 57)",
  "textColor3": "rgb(118, 124, 130)",
  "textColorDisabled": "rgba(194, 194, 194, 1)",
  "placeholderColor": "rgba(194, 194, 194, 1)",
  "placeholderColorDisabled": "rgba(209, 209, 209, 1)",
  "iconColor": "rgba(194, 194, 194, 1)",
  "iconColorHover": "rgba(146, 146, 146, 1)",
  "iconColorPressed": "rgba(175, 175, 175, 1)",
  "iconColorDisabled": "rgba(209, 209, 209, 1)",
  "opacity1": "0.82",
  "opacity2": "0.72",
  "opacity3": "0.38",
  "opacity4": "0.24",
  "opacity5": "0.18",
  "dividerColor": "rgb(239, 239, 245)",
  "borderColor": "rgb(224, 224, 230)",
  "closeIconColor": "rgba(102, 102, 102, 1)",
  "closeIconColorHover": "rgba(102, 102, 102, 1)",
  "closeIconColorPressed": "rgba(102, 102, 102, 1)",
  "closeColorHover": "rgba(0, 0, 0, .09)",
  "closeColorPressed": "rgba(0, 0, 0, .13)",
  "clearColor": "rgba(194, 194, 194, 1)",
  "clearColorHover": "rgba(146, 146, 146, 1)",
  "clearColorPressed": "rgba(175, 175, 175, 1)",
  "scrollbarColor": "rgba(0, 0, 0, 0.25)",
  "scrollbarColorHover": "rgba(0, 0, 0, 0.4)",
  "scrollbarWidth": "5px",
  "scrollbarHeight": "5px",
  "scrollbarBorderRadius": "5px",
  "progressRailColor": "rgba(235, 235, 235, 1)",
  "railColor": "rgb(219, 219, 223)",
  "popoverColor": "#fff",
  "tableColor": "#fff",
  "cardColor": "#fff",
  "modalColor": "#fff",
  "bodyColor": "#fff",
  "tagColor": "#eee",
  "avatarColor": "rgba(204, 204, 204, 1)",
  "invertedColor": "rgb(0, 20, 40)",
  "inputColor": "rgba(255, 255, 255, 1)",
  "codeColor": "rgb(244, 244, 248)",
  "tabColor": "rgb(247, 247, 250)",
  "actionColor": "rgb(250, 250, 252)",
  "tableHeaderColor": "rgb(250, 250, 252)",
  "hoverColor": "rgb(243, 243, 245)",
  "tableColorHover": "rgba(0, 0, 100, 0.03)",
  "tableColorStriped": "rgba(0, 0, 100, 0.02)",
  "pressedColor": "rgb(237, 237, 239)",
  "opacityDisabled": "0.5",
  "inputColorDisabled": "rgb(250, 250, 252)",
  "buttonColor2": "rgba(46, 51, 56, .05)",
  "buttonColor2Hover": "rgba(46, 51, 56, .09)",
  "buttonColor2Pressed": "rgba(46, 51, 56, .13)",
  "boxShadow1": "0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04)",
  "boxShadow2": "0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)",
  "boxShadow3": "0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)"
} */
  /* :root{
    
    
    --nvbe-tool-color: var(--text-color-2, #324057);
    --nvbe-tool-button-width: 30px;
    --nvbe-tool-background-color: var(--white-default, #fff);
    --nvbe-tool-radius: 6px;
    --nvbe-tool-padding: 3px;
    --nvbe-tool-title-background-color: var(--gray-9, #F9FAFC);
    --nvbe-tool-title-color: var(--text-color-3, #8492A6);
    --nvbe-tool-add-icon-hover-background: var(--primary-opacity-1, #007dff15);
    --nvbe-tool-add-icon-hover-color: var(--primary-default, #007dff);
    --nvbe-tooltip-color: #e0e2e7;
    --nvbe-tooltip-background: var(--gray-0, #1f2d3d);
    --nvbe-tooltip-shadow-color: var(--gray-opacity-2, #1f2d3d40);
    --nvbe-toolbar-hover-color: var(--gray-8, #f0f2f7);
    --nvbe-toolbar-active-hover-color: var(--primary-opacity-1, #007dff20);
    --nvbe-settings-border-color: var(--gray-7, #E5E9F2);
    --nvbe-settings-mutted-color: var(--text-color-3, #8492A6);
    --nvbe-settings-default-color: var(--text-color-2, #333639);
    --nvbe-dropper-background: var(--primary-opacity-3, #007dff47);
} */
}

html[ui-size="compact"] {
  font-size: 9pt;
}

@set std-button < std-button-base {
  :root {
    aspect: Ripple url(theme.js);
    color: color(button-text);
    background: color(button-face);
    box-shadow: #888 1dip 1dip 1dip;
    cursor: pointer;
    padding: 0.5em 1em;
  }
  //:root:hover { background: color(lighten3); }
  //:root:active { background: color(lighten5); }
  :root:tab-focus {
    outline: 1dip dashed color(accent) -4dip;
  }

  :root:not(:disabled).primary,
  :root:not(:disabled)[role="default-button"] {
    var(button-face): color(accent);
    color: color(accent-text);
    fill: color(accent-text);
  }

  :root.primary:active,
  :root[role="default-button"]:active {
    background: color(accent);
  }

  :root.danger {
    var(button-face): color(danger-color);
    color: color(accent-text);
  }

  :root.success {
    var(button-face): color(success-color);
    color: color(accent-text);
  }

  :root.warning {
    var(button-face): color(warning-color);
    color: color(accent-text);
  }

  :root:disabled {
    background: color(button-face-disabled);
    color: color(disabled-text);
    box-shadow: none;
  }
}

@set std-edit {
  :root {
    display: block;
    background: transparent;
    color: color(widget-text);
    padding-top: 0.5em;
    border-bottom: 1dip solid #bbb;
    width: *;
    background: url(stock:block) center bottom no-repeat;
    background-size: 0% 2dip;
    background-clip: border-box;
    fill: color(accent);
    transition: background-size quad-out 160ms;
    flow: text;
    cursor: text;
    white-space: pre;
    behavior: edit;
    line-height: 1.6em;
  }
  :root::marker {
    margin-top: 0.5em;
    line-height: 1.6em;
    width: *;
    transform-origin: 0% 0%;
    color: #777;
    content: attr(placeholder);
    transition: transform quad-out 160ms;
  }

  :root:owns-focus::marker,
  :root:not(:empty)::marker {
    transform: translate(0, -80%) scale(0.7);
  }

  :root:owns-focus {
    background-size: 100% 2dip;
  }

  :root[nullable] {
    padding-right: 1.2em;
    foreground-position: top 50% right 0.5em;
    foreground-repeat: no-repeat;
    foreground-image-cursor: pointer;
    foreground-size: 0.5em;
    //fill:currentcolor;
    stroke: none;
    box-sizing: content-box;
  }
  :root[nullable]:not(:empty) {
    //fill:transparent;
    foreground-image: url(stock:cross-x);
  }
}

@set std-number-edit < std-number-edit-base {
  :root {
    display: block;
    background: transparent;
    color: color(widget-text);
    padding-top: 0.5em;
    border-bottom: 1dip solid #bbb;
    width: 8em;
    background: url(stock:block) center bottom no-repeat;
    background-size: 0% 2dip;
    background-clip: border-box;
    fill: color(accent);
    transition: background-size quad-out 160ms;
    flow: horizontal;
    border-spacing: 1dip;
    line-height: 1.6em;
  }
  :root::marker {
    margin-top: 0.5em;
    line-height: 1.6em;
    width: *;
    margin-right: 3.2em;
    transform-origin: 0% 0%;
    color: #777;
    content: attr(placeholder);
    transition: transform quad-out 160ms;
    z-index: -1;
  }

  :root:owns-focus::marker,
  :root:not(:empty)::marker {
    transform: translate(0, -80%) scale(0.7);
  }

  :root:owns-focus {
    background-size: 100% 2dip;
  }

  //:root:owns-popup,
  //:root:focus            { text-selection: color(selection-text) color(selection); }
  //:root:disabled         { background:color(widget-disabled); color:color(widget-disabled-text); }
  //:root:tab-focus        { outline:@STD-OUTLINE-FOCUS; }

  :root > caption {
    width: *;
    line-height: 1.6em;
    height: 1.6em;
    //padding:0.2em 0 0.2em 0.4em;
  }

  //:root:disabled > caption { color:color(widget-disabled-text); }
  //:root:not([step]) > caption { border-radius: length(border-radius); }

  :root > button {
    height: *;
    min-height: 5dip;
    width: 1.6em;
    box-shadow: none;
    foreground-position: 50% 50%;
    foreground-size: 5dip;
    foreground-repeat: no-repeat;
    cursor: pointer;
  }

  /*:root > button:hover
  {
    transition:none;
    background:color(button-hover);
  }
  :root > button:active
  {
    background:color(button-hover);
  }
  :root:disabled > button
  {
    background: color(widget-disabled);
    color: color(widget-disabled-text);
    fill: color(widget-disabled-text);
  }*/

  :root > button.minus {
    padding: 0;
    foreground-image: url(stock:chevron-down);
  }

  :root > button.plus {
    padding: 0;
    foreground-image: url(stock:chevron-up);
  }
}

editbox {
  style-set: std-edit;
}

/* radio button */
radio {
  style-set: std-radio;
}

@set std-radio {
  :root {
    behavior: radio;
    display: block;
    width: max-content;
    line-height: 1.4em;
    padding: * 0.6em * 1.8em;
    cursor: pointer;
  }

  :root::marker {
    size: 13dip;
    border: 2dip solid #bbb;
    border-radius: 8dip;
    margin: * * * 0;
    background: url(stock:disk) 50% 50% no-repeat;
    background-size: 8dip;
    fill: transparent;
    transition: border-color linear 160ms, fill linear 160ms;
  }

  :root:checked::marker {
    fill: color(accent);
    border-color: color(accent);
  }

  :root:tab-focus {
    outline: 1dip dashed color(normal) 2dip;
  }
}

/* checkbox button */
checkbox {
  style-set: std-checkbox;
}

@set std-checkbox {
  :root {
    behavior: check;
    display: block;
    width: max-content;
    line-height: 1.4em;
    padding: * 0.6em * 1.8em;
    cursor: pointer;
  }

  :root::marker {
    size: 12dip;
    border: 2dip solid #bbb;
    border-radius: 3dip;
    margin: * * * 0;
    background: url(path:M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z)
      50% 50% no-repeat;
    background-size: 0.8em;
    background-color: color(widget-back);
    fill: transparent;
    stroke: none;
    transition: border-color linear 160ms, background-color linear 160ms;
  }

  :root:checked::marker {
    fill: color(widget-back);
    background-color: color(accent);
    border-color: color(accent);
  }

  :root[mixed]:empty::marker {
    background-image: url(path:M1664 416v960q0 119-84.5 203.5t-203.5 84.5h-960q-119 0-203.5-84.5t-84.5-203.5v-960q0-119 84.5-203.5t203.5-84.5h960q119 0 203.5 84.5t84.5 203.5z);
    background-size: 0.5em;
    fill: color(widget-text);
  }

  :root:tab-focus {
    outline: 1dip dashed color(accent) 2dip;
  }
}

@set std-toggle {
  :root {
    behavior: check;
    display: block;
    width: 3em;
    height: 1em;
    padding: 0.3em;
    border-radius: 0.6em;
    background-clip: content-box;
    background: #ddd;
    cursor: pointer;
    transition: background-color linear 160ms;
  }

  :root > option {
    visibility: none;
  }

  :root:checked {
    background-color: color(lighten4);
  }

  :root::marker // the knob
  {
    display: block;
    background-color: #bbb;
    size: 1.4em;
    margin: * * * 0;
    border-radius: 0.7em;
    box-shadow: #aaa 1dip 1dip 1dip;
    transform: translate(0em, 0);
    transition: background-color linear 160ms, transform quad-out 160ms;
  }

  :root:checked::marker {
    transform: translate(2em, 0);
    background-color: var(accent, #000);
  }

  :root:tab-focus {
    outline: 1dip dashed color(normal) 2dip;
  }
}

slider {
  display: inline-block;
  style-set: std-hslider;
}

@set std-hslider < std-hslider-base {
  :root {
    display: block;
    background: #ddd;
    padding: 7dip;
    background-clip: content-box;
    background-image: url(stock:block);
    background-repeat: no-repeat;
    background-position: 0 0;
    fill: color(accent);
    width: 8em;
    height: 2dip;
    background-size: var(slider-position, 0px) 2dip; // "value" part
  }
  :root > knob {
    size: 16dip;
    box-shadow: #aaa 1dip 1dip 1dip;
    background: color(accent);
    foreground: none;
    border: none;
    border-radius: 8dip;
    padding: 0;
  }

  :root > knob::marker {
    content: parent-attr(value);
    size: 32dip 36dip;
    line-height: 32dip;
    text-align: center;
    background: no-repeat
      url(path:M8 2.1c1.1 0 2.2 0.5 3 1.3 0.8 0.9 1.3 1.9 1.3 3.1s-0.5 2.5-1.3 3.3l-3 3.1-3-3.1c-0.8-0.8-1.3-2-1.3-3.3 0-1.2 0.4-2.2 1.3-3.1 0.8-0.8 1.9-1.3 3-1.3z);
    background-size: 32dip 36dip;
    fill: color(lighten4);
    stroke: none;
    transform: translate(-8dip, -100%) scale(0);
    transition: transform 160ms;
    transform-origin: 50% 100%;
    filter: drop-shadow(1dip, 1dip, 1dip, #999);
  }

  :root:focus > knob::marker,
  :root:hover > knob::marker {
    transform: translate(-8dip, -100%) scale(1);
  }
}

input {
  display: block;
  width: 8em;
}

@set std-select-dropdown < std-select-dropdown-base {
  :root {
    aspect: Ripple url(theme.js);
    color: color(button-text);
    background: color(button-face);
    box-shadow: #888 1dip 1dip 1dip;
    cursor: pointer;
    padding: 0.5em 1em;
  }
  //:root:hover { background: color(lighten3); }
  //:root:active { background: color(lighten5); }
  :root:tab-focus {
    outline: 1dip dashed color(accent) -4dip;
  }

  :root:disabled {
    background: color(button-face-disabled);
    color: color(disabled-text);
    box-shadow: none;
  }

  :root > button {
    padding: 0;
    background: none;
    box-shadow: none;
    border: none;
  }
}

@set std-progress < std-progress-base {
  :root {
    display: block;
    width: 8em;
    height: 0.28em;
    border-style: none;
    padding: 0;
    margin: * 0;
    background: color(lighten5);
  }

  :root:not(:busy)::marker {
    width: length(progress-percent);
    height: *;
    background: color(accent);
    stroke: none;
    stroke-width: 0;
  }

  :root:busy::marker {
    width: *;
    height: *;
    background-repeat: no-repeat;
    background-image: url(path: M 0 0 L 9 0 L 9 9 L 0 9 Z);
    background-size: 25% 100%;
    fill: color(accent);
    stroke: none;
    stroke-width: 0;
    animation: 1.2s infinite alternate std-progress-slide;
  }
}
